<template>
    <j-modal
      width="70%"
      title="账单匹配列表"
      :maskClosable="false"
      :destroyOnClose="true"
      :visible.sync="editModalVisible"
      @cancel="handleCancleDbSync"
      @ok="handleDbSync"
    >
      <template slot="footer">
        <div style="text-align:right;">
          <a-button @click="handleCancleDbSync">关闭</a-button>
          <a-button type="primary" :loading="syncLoading" @click="handleDbSync">确定</a-button>
        </div>
      </template>
      <vxe-grid
        ref="xTable"
        border
        resizable
        keep-source
        height="300px"
        align="center"
        :columns="column"
        :data="dataSource"
        :edit-rules="validRules"
        :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
      >
      </vxe-grid>
  </j-modal>
</template>
<script>
import { getAction, postAction } from '@/api/manage'
export default {
  name: 'AuditListModal',
  data() {
    return {
      editModalVisible: false,
      disableSubmit: false,
      syncLoading: false,
      url: {
        list: '/custom/autoAmount',
        addAmount: '/custom/addAmount'
      },
      dataSource: [],
      column: [
        { type: 'seq', width: 40 },
        { title: '账单编号', field: 'bill_code', showOverflow: true },
        { title: '费项编码', field: 'cost_type', showOverflow: true },
        { title: '费项名称', field: 'cost_name' },
        { title: '仪表耗用', field: 'meter_diff', showOverflow: true },
        { title: '抄表记录编号', field: 'record_code', showOverflow: true },
        { title: '仪表编号', field: 'device_code', showOverflow: true },
        { title: '账单金额', field: 'bill_amount', showOverflow: true },
        { title: '已分配金额', field: 'sum_check_amount' },
        { title: '剩余金额', field: 'surplus_amount' },
        { title: '分配金额', field: 'plan_amount' }
      ],
      formData: {}
    }
  },
  methods: {
    edit(row) {
      this.formData = row
      this.editModalVisible = true
      this.loadData()
    },
    loadData() {
      getAction(this.url.list, {
        account_code: this.formData.account_code
      }).then((res) => {
        if (res.success) {
          this.dataSource = res.result
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
      })
    },
    handleCancleDbSync() {
      this.editModalVisible = false
    },
    handleDbSync() {
      const tableData = this.$refs.xTable.getTableData()
      const data = []
      tableData.fullData.forEach(item => {
        data.push({
          bill_code: item.bill_code,
          account_code: this.formData.account_code,
          check_amount: item.plan_amount
        })
      })
      postAction(this.url.addAmount, data).then(res => {
        if (res.success) {
          this.editModalVisible = false
          this.$message.success('分配成功')
          this.$emit('ok')
        } else {
          this.$message.warning(res.message)
        }
      })
    }
  }
}
</script>
<style lang="less">

</style>
